<head th:fragment=header(title)>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title th:text="${title}"></title>
    <link href="https://lib.baomitu.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
    <link href="https://lib.baomitu.com/font-awesome/5.8.0/css/fontawesome.min.css" rel="stylesheet">
    <link th:href="@{/front/css/all.css}" rel="stylesheet"/>

    <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/underscore.js/1.9.1/underscore-min.js"></script>
    <script src="https://lib.baomitu.com/amazeui/2.7.2/js/amazeui.min.js"></script>
</head>

<div th:fragment="nav(title)">
    <div class="header">
        <div class="am-topbar" style="margin-bottom: 0">
            <h1 class="am-topbar-brand">
                <a href="/front/index/" class="blogTitleName">
                    <img th:src="@{/img/head.jpg}" class="imgStyle" th:text="${title}"></a>
            </h1>
            <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
                <ul class="am-nav am-nav-pills am-topbar-nav">
                    <li><a class="top_bar" href="/front/index" style="cursor: pointer;"><span class="fa fa-sliders"></span>首页</a></li>
                    <li><a class="top_bar" href="/" style="cursor: pointer;"><span class="fa fa-users"></span>&nbsp;技术杂谈</a></li>
                    <li><a class="top_bar" href="/front/diary" style="cursor: pointer;"><span class="fa fa-pencil"></span>&nbsp;工作日记</a></li>
                    <li><a class="top_bar" href="/" style="cursor: pointer;"><span class="fa fa-wrench"></span>&nbsp;常用工具</a></li>
                    <li><a class="top_bar" href="/front/album" style="cursor: pointer;"><span class="fa fa-photo"></span>&nbsp;个人相册</a></li>
                    <li><a class="top_bar" href="/" style="cursor: pointer;"><span class="fa fa-book"></span>&nbsp;我的书单</a></li>
                    <li><a class="top_bar" href="/" style="cursor: pointer;"><span class="am-icon-user"></span>&nbsp;关于我</a> </li>
                </ul>

                <div class="am-topbar-right" th:if="${#httpServletRequest.remoteUser}">
                    <div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
                        <button class="personalSpace am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle" data-am-dropdown-toggle>
                            <span>[[${@user.getUser().loginName}]]</span>
                            <span class="am-icon-caret-down"></span>
                        </button>
                        <ul class="am-dropdown-content">
                            <li><a href="/" sec:authorize="hasRole('ROLE_USER')">我的主页</a></li>
                            <li><a class="feedbackClick">反馈</a></li>
                            <hr style="margin: 10px 0 5px 0;">
                            <li><a th:href="@{/logout?front}">退出登录</a></li>
                        </ul>
                    </div>
                </div>

                <div class="am-topbar-right" th:unless="${#httpServletRequest.remoteUser}">
                    <a href="/front/register" class="am-btn am-btn-primary am-topbar-btn am-btn-sm" style="color: white">注册</a>
                </div>
                <div class="am-topbar-right" th:unless="${#httpServletRequest.remoteUser}">
                    <a href="/front/login" class="loginBtn am-btn am-btn-primary am-topbar-btn am-btn-sm" style="color: white">登录</a>
                </div>
            </div>
        </div>
    </div>
</div>
